<template xmlns="http://www.w3.org/1999/html">
  <div>
    <h1>测试页面</h1>

    <h3>测试1</h3>

    <p>pinia中的num：{{ test.num }}</p>
    <el-button type="primary" @click="pinia">pinia</el-button>

    <el-button type="primary" @click="pinia2">新窗口</el-button>

    <h3>测试2</h3>
    <el-button type="primary" @click="testDiv">布局</el-button>

    <h3>测试3</h3>

    <div>
      <input v-model="apiData">
      <p>同步更新为1: {{ apiData }}</p>
    </div>
    <el-button type="primary" @click="testApi">api</el-button>

    <el-divider style="border-color: #ff6b6b;"></el-divider>
    <el-divider style="border-color: #3498db;"/>
    <!-- 带文字的分割线 -->
    <el-divider style="border-color: #4ecdc4;">
      <span style="color: #45b7d1; font-weight: bold;">自定义颜色</span>
    </el-divider>
    <h3>:gutter="24": gutter 指的是“槽”或“间距”
      :span="6": span 属性定义了列在栅格系统中占据的份数。
    </h3>
    <el-row :gutter="50">
      <el-col :span="12">
        <div style="height: 50px;background: red">内容1</div>
      </el-col>
      <el-col :span="12">
        <div style="height: 50px;background: green">内容2</div>
      </el-col>
      <el-col :span="12">
        <div style="height: 50px;background: darkcyan">内容3</div>
      </el-col>
      <el-col :span="12">
        <div style="height: 50px;background: yellow">内容4</div>
      </el-col>
      <el-col :span="12">
        <div style="height: 50px;background: red">内容5</div>
      </el-col>
    </el-row>

    <div>
      <el-button type="primary" @click="myConfirm">js调用confirm</el-button>
      <el-button type="primary" @click="showDialog">弹出对话框</el-button>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import Test from "@/store/test";
import MyPage from "@/views/test/MyPage.vue";

export default {
  components: {},
  props: {},
  data() {
    return {
      apiData: '初始化',
      // 创建Test的pinia实例
      test: Test()
    }
  },
  methods: {

    pinia() {
      this.$router.push('testPinia')
    },

    pinia2() {
      const routeData = this.$router.resolve({path: '/test1/testPinia', query: {id: 1}})
      window.open(routeData.href, '_blank')
    },

    testDiv() {
      const routeData = this.$router.resolve({path: '/testDiv', query: {id: 1}})
      window.open(routeData.href, '_blank')

      //
      // let routeUrl = this.$router.resolve({
      //   path: "/testDiv",
      //   query: {id:96}
      // });
      // window.open(routeUrl .href, '_blank');
    },
    testApi() {

      request({
        url: '/data',
        method: 'get'
      }).then(res => {
        console.log("res=" + JSON.stringify(res))
        this.apiData = res.data
      })

    },

    showDialog() {
      this.$dialog({
        title: '警告',
        // content: '你确定要执行此操作吗？',
        content: MyPage,
        width: '40%',
        onConfirm: (close, data) => {
          // 模拟异步操作
          console.log('用户输入:', JSON.stringify(data)); // ✅ 拿到了！
          setTimeout(() => {
            this.$message.success('操作成功');
            close(); // 手动关闭
          }, 1000);
        },
        onCancel: () => {
          this.$message.info('已取消');
        }
      });
    },

    myConfirm() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 用户点击“确定”
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        // 用户点击“取消”或关闭
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });


    }

  }
}
</script>

<style scoped lang="less"></style>
